<template>
  <footer class="footer">
    <router-link v-for="(v, i) in list" :key="i" @click.native="switchFoot(v)" tag="figure" :to="v.path">
      <img :src="v.src">
      <figcaption>{{v.name}}</figcaption>
    </router-link>
  </footer>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {
          src: require('../assets/logo.png'),
          name: '外卖',
          path: '/'
        },
        {
          src: require('../assets/logo.png'),
          name: '发现',
          path: '/list'
        },
        {
          src: require('../assets/logo.png'),
          name: '订单',
          path: '/dingdan'
        },
        {
          src: require('../assets/logo.png'),
          name: '我的',
          path: '/dome'
        }
      ]
    }
  },
  methods: {
    switchFoot (v) {
      this.$emit('navTitle', v.name)
    }
  },
  created () {
    this.$emit('navTitle', this.list[0].name)
  }
}
</script>

<style scoped lang="less">
  .footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55px;
    display: flex;
    background: white;
    // box-shadow: 0 -5px 5px #ccc;
    figure{
      &.router-link-exact-active{
        background-color: #ccc;
      }
      flex: 1;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      img{
        width: 30px;
        height: 30px;
      }
      figcaption{
        font-size: 12px;
        padding-top: 5px;
      }
    }
  }
</style>
